<script>
import siteMixin from "../../siteMixin.js";
import { merge, omit } from "lodash";
import BaseForm from "./form.vue";
import FormButton from "./button.vue";
export default {
  mixins: [siteMixin],
  data() {
    return {
      formData: {},
      loading: false,
      loading2: false,
    };
  },
  provide() {
    return {
      context: {
        onSubmit: this.onSubmit,
        onCancel: this.onCancel,
        onReject: this.onReject,
      },
    };
  },
  computed: {
    /**
     * 继承覆盖这个formOptions
     */
    formOptions() {
      return {};
    },
    _formOptionsSync() {
      const formOptions = merge(
        {
          submit: true,
          reset: true,
          reject: false,
          pageClass: "",
          width: "500px",
          labelWidth: this.isCn ? "100px" : "120px",
          columns: [],
        },
        this.formOptions
      );
      formOptions.columns.forEach((column) => {
        column.context = column.context || this;
      });
      return formOptions;
    },
  },
  watch: {
    formData: {
      deep: true,
      handler() {
        if (!this.$refs.form?.formData) return;
        for (let key in this.formData) {
          this.$refs.form.formData[key] = this.formData[key];
        }
      },
    },
  },
  methods: {
    _onFormDataUpdate(formData) {
      for (let key in formData) {
        this.$set(this.formData, key, formData[key]);
      }
    },
    _onReset() {
      const formComponent = this.$refs.form;
      for (let key in formComponent.resetFormData) {
        formComponent.formData[key] = formComponent.resetFormData[key];
      }
      this.$refs.form.onReset();
    },
    _renderFooter() {
      const btns = [];
      if (this._formOptionsSync.submit) {
        btns.push(
          <FormButton
            type="primary"
            size="small"
            loading={this.loading}
            label={$AONE_LAN.sure}
            onClick={() => this.$refs.form?.onSubmit?.()}
          />
        );
      }
      if (this._formOptionsSync.reject) {
        btns.push(
          <FormButton
            type="warning"
            size="small"
            loading={this.loading2}
            label={$AONE_LAN.reject}
            onClick={() => this.$refs.form?.onReject?.()}
          />
        );
      }
      if (this._formOptionsSync.reset) {
        btns.push(
          <FormButton
            label={$AONE_LAN.reset}
            type=""
            size="small"
            onClick={() => this._onReset()}
          />
        );
      }
      return btns.length ? (
        <div class="aone-form-page-fotter">{btns}</div>
      ) : null;
    },
  },
  render() {
    return (
      <div
        style={"width:" + this._formOptionsSync.width}
        class={["aone-form-page", this._formOptionsSync.pageClass]}
      >
        <BaseForm
          ref="form"
          formOptions={this._formOptionsSync}
          onFormDataUpdate={this._onFormDataUpdate}
        />
        {this._renderFooter()}
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
.aone-form-page-fotter {
  text-align: center;
}
</style>